import React from 'react';
import styles from './style';
import {
  Text,
  SafeAreaView,
  Image,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../../../common/component/back';
import {authLogin} from '../../../../common/api/login';

const iphone = require('../../img/iPhone.png');
const word = require('../../img/word.png');
const delayShow = {
  0: {
    opacity: 0,
  },
  1: {
    opacity: 1,
  },
};
class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tel: '',
      word: '',
    };
  }
  login = async () => {
    const {tel, word: statteWord} = this.state;
    const res = await authLogin(tel, statteWord);
    if (!res) {
      return;
    }
    this.props.navigation.navigate('Home');
  };
  render() {
    let {navigation} = this.props;
    return (
      <SafeAreaView style={styles.safrArea}>
        <Back navigation={navigation} />
        <View style={styles.viewBox}>
          <Animatable.Text style={styles.navText} animation="zoomIn">
            欢迎来到摄图
          </Animatable.Text>
          <Animatable.View style={styles.viewBorder} animation="slideInUp">
            <Image source={iphone} style={styles.iphoneStyle}></Image>
            <Text style={styles.border}>|</Text>
            <TextInput
              onChangeText={(text) => this.setState({tel: text})}
              value={this.state.tel}
              placeholder="请输入手机号"
              keyboardType="phone-pad"
              placeholderTextColor="#999"
              style={styles.wordInput}
            />
          </Animatable.View>
          <Animatable.View style={styles.viewBorder} animation="slideInUp">
            <Image source={word} style={styles.wordStyle}></Image>
            <Text style={styles.border}>|</Text>
            <TextInput
              onChangeText={(text) => this.setState({word: text})}
              value={this.state.word}
              placeholder="请输入验证码"
              placeholderTextColor="#999"
              style={styles.wordInput}
            />
            <TouchableOpacity style={styles.buttonStyle}>
              <Text style={styles.text}>获取验证码</Text>
            </TouchableOpacity>
          </Animatable.View>
          <Animatable.Text
            style={styles.remarkText}
            animation={delayShow}
            delay={400}>
            未注册的手机号验证后自动创建摄图账号
          </Animatable.Text>
          <TouchableOpacity onPress={this.login}>
            <Animatable.View
              style={[styles.viewBorder, styles.loginButton]}
              animation="slideInUp">
              <Text style={styles.textLogin}>登录</Text>
            </Animatable.View>
          </TouchableOpacity>
        </View>
        <View style={styles.bottomContainer}>
          <Text style={styles.bottomText}>登录即同意</Text>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('UserAgreement');
            }}>
            <Text style={[styles.bottomText, styles.bottomLine]}>用户协议</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

export default Login;
